<template>
  <div>
    <el-table v-loading="loading" :data="blogList" stripe>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column show-overflow-tooltip label="内容" width="400">
        <template slot-scope="scope">
          <span v-if="scope.row.headline" v-html="scope.row.headline"></span>
          <span v-else v-html="scope.row.content"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="download_url"
        label="图片"
        width="300"
        align="center"
      >
        <template slot-scope="scope">
          <el-image
            v-for="item in scope.row.download_url"
            :key="item"
            :src="item"
            :preview-src-list="scope.row.download_url"
            style="margin: 2px; width: 70px; height: 50px"
            lazy
            fit="contain"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="发布人"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state">上架</span>
          <span v-else>下架</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="onDel(scope.row)"
            >删除</el-button
          >
          <el-button
            v-if="scope.row.state"
            size="mini"
            type="warning"
            @click="onOff(scope.row)"
            >下架</el-button
          >
          <el-button v-else size="mini" type="warning" @click="onOff(scope.row)"
            >上架</el-button
          >
          <el-button size="mini" type="primary" @click="onSee(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 确认删除的对话框 -->
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%">
      <span>确定删除该博客吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doDel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 确认下架的对话框 -->
    <el-dialog title="提示" :visible.sync="offDialogVisible" width="30%">
      <span>确定下架该博客吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="offDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doOff">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, del, off } from "@/api/blog";
import scroll from "@/utils/scroll";
export default {
  data() {
    return {
      blogList: [],
      count: 50,
      loading: false, //加载动画
      delDialogVisible: false, //删除的对话框是否显示
      offDialogVisible: false, //下架的对话框是否显示
      blog: {},
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    scroll.start(this.getList);
  },
  methods: {
    getList() {
      this.loading = true;
      fetchList({
        start: this.blogList.length,
        count: this.count,
      }).then((res) => {
        console.log(res);
        // const data = res.data
        // let _blogList =  []
        // for(let i=0, len=data.length;i<len;i++){
        //   _blogList.push(JSON.parse(data[i]))
        // }
        this.blogList = this.blogList.concat(res.data);
        if (res.data.length < this.count) {
          scroll.end();
        }
        this.loading = false;
      });
    },
    // 删除
    onDel(row) {
      this.delDialogVisible = true;
      this.blog = row;
    },
    doDel() {
      this.loading = true;
      this.delDialogVisible = false;
      del(this.blog).then((res) => {
        this.loading = false;
        // console.log(res)
        if (res.data.delBlogRes.deleted > 0) {
          this.blogList = [];
          this.getList();
          this.$message({
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    // 下架
    onOff(row) {
      this.offDialogVisible = true;
      this.blog = row;
    },
    doOff() {
      this.loading = true;
      this.offDialogVisible = false;
      this.blog.state = !this.blog.state;
      console.log(this.blog);
      off(this.blog).then((res) => {
        this.loading = false;
        console.log(res);
        if (res.code == 20000) {
          this.blogList = [];
          this.getList();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 看看
    onSee(row) {
      console.log(row);
      this.$router.push({
        path: `/blog/edit`,
        query: { row },
      });
    },
  },
};
</script>

<style>
</style>